<template>
  <div class="bottomBar">
    <div class="bar-left bar-item">
      <div class="left-item">
        <img src="~assets/images/detail/service.png" alt="">
        <div>客服</div>
      </div>
      <div class="left-item">
        <img src="~assets/images/detail/shop.png" alt="">
        <div>店铺</div>
      </div>
      <div class="left-item">
        <img src="~assets/images/detail/collect.png" alt="">
        <div>收藏</div>
      </div>
    </div>
    <div class="bar-right bar-item">
      <div class="right-item cart" @click="addToCart">
        <div>加入购物车</div>
      </div>
      <div class="right-item buy">
        <div>购买</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {}
    },
    methods:{
      addToCart(){
     
        this.$emit('addGoodsToCart')
      }
    }
  }
</script>

<style scoped>
  .bottomBar{
    height:49px;
    background-color:#fff;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index: 99;
    display:flex;
    font-size:12px;
    box-shadow: 0 -1px 1px rgba(0,0,0,.1);
  }
  .bar-item{
    flex:1;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    text-align:center;
  }
  .left-item img{
    margin-top: 5px;
    width:22px;
    height:22px;
    vertical-align:middle;
  }
  .right-item{
    width:100%;
  }
  .right-item div{
    line-height: 49px;;
  }
  .cart{
    background-color:#ffe817;
  }
  .buy{
    background-color: #ff5777;
    color:#fff;
  }
</style>
